<template lang="pug">
  #app(onselectstart='return false', :class="{'ipad-mod': getDevicePixel}", :key="isReloadPanoId")
    router-view
    #local_stream(style='position: absolute;z-index: -1;')
</template>

<script>
import { isPad, isWxBrowser, isMobile, isPc } from '@/utils'
import { audioManage } from '@/utils/audio'

export default {
  name: 'App',
  computed: {
    getDevicePixel () {
      return isPad()
    },
    createNonce () {
      return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
    }
  },
  watch: {
    $route:{
      handler (val,oldval) {
        // console.log(val) // 新路由信息
        // console.log(oldval) // 老路由信息
        // 刷新页面，处理手机浏览器缓存
        if (val.params && val.params.panoId) {
          this.isReloadPanoId = val.params.panoId
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  data () {
    return {
      isReloadPanoId: ''
    }
  },
  mounted () {
    // if (isMobile()) {
    //   document.addEventListener('visibilitychange', () => {
    //     // 用户离开了当前页面
    //     if (document.visibilityState === 'hidden') {
    //       audioManage.pauseAll()
    //     }
    //     // 用户打开或回到页面
    //     if (document.visibilityState === 'visible') {
    //       audioManage.continueAll()
    //     }
    //   })
    // }
    if (location.hash.indexOf('handdraw/') !== -1) {
      const bodyClassList = document.body.classList
      bodyClassList.add(isPc() ? 'pc-mode' : 'mobile-mode')
    }
  },
}
</script>

<style>
#app {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}
</style>
